<template>
	<view>
		<!-- 上 -->
		<view class="top">
			<!-- <input type="text" placeholder="请输入搜索内容" confirm-type="search" class="inp" /> -->
			<view class="frame" @click="toSearchPage()">
				<image class="searchP" src="/static/images/lunbo/search.png" widthFix />
				<input type="text" value="请输入内容" />
			</view>
			<!-- </form> -->
			<view class="classify">
				<span class="spanCla" @click="studyChinese(1)">动物</span>
				<span class="spanCla" @click="studyChinese(2)">好习惯</span>
				<span class="spanCla" @click="studyChinese(0)">全部分类</span>
			</view>
		</view>
		<!-- 轮播 -->
		<swiper class="swiper" circular
			:indicator-dots="true" 
			:autoplay="true" 
			interval="2000"
			duration="500">
			<swiper-item v-for="(item,index) in rotationArr" :key="index">
				<img :src=item.src  style="width: 100%;height: 100%;"  alt="" @click=toDetail(item)>
			</swiper-item>
		</swiper>
		<view class="w">
			<view class="mbtm">
				<h5>动物</h5>
			</view>
			<view class="box">
				<template v-for="(item,index) in conGuo" :key="index">
					<view class="boxbox" @click="toDetail(item)">
						<view class="pos11">
							<img class="imgbox" :src="item.src">
							<view class="text3">
								共{{item.juji.length}}课
							</view>
						</view>
						<view>
							{{item.className}}
						</view>
						<view class="text">
							推荐语
						</view>
					</view>
				</template>
			</view>
		</view>
		<!-- 内容二 -->
		<view class="w">
			<view class="mbtm">
				<h5>好习惯</h5>
			</view>
			<view class="box">
				<template v-for="(item,index) in conYing" :key="index">
					<view class="boxbox" @click="toDetail(item)">
						<view class="pos11">
							<img class="imgbox" :src="item.src">
							<view class="text3">
								共{{item.juji.length}}课
							</view>
						</view>
						<view>
							{{item.className}}
						</view>
						<view class="text">
							推荐语
						</view>
					</view>
				</template>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {			
			return {
				rotationArr:[
					// {
					// 	src: '/static/home/TomJerry.jpeg',
					// 	txt:　'卡通一'					
					// },
					// {
					// 	src: '/static/image/rotation1.jpg',
					// 	txt:　'卡通二'					
					// },
					// {
					// 	src: '/static/home/seven.jpeg',
					// 	txt:　'卡通三'					
					// },
				],
				conGuo: [],
				conYing: []
			}
		},
		methods: {
			studyChinese(a){
				uni.navigateTo({
					url: '/uni_modules/my-cartnetwork/components/my-cartnetwork/my-cartnetwork?index='+a
				});
			},
			toDetail(item){
				uni.navigateTo({
					url: '/uni_modules/cartoon-details/components/cartoon-details/cartoon-details?item='+encodeURIComponent(JSON.stringify(item))
				})
			},
			// 搜索
			toSearchPage(){
				uni.navigateTo({
					url: '/uni_modules/my-cartnetwork/components/cartSearch/cartSearch'
				});
			}
		},
		onShow:function(){
			this.conGuo = this.$store.state.cartoonData.classesGuo.slice(0,3);
			this.conYing = this.$store.state.cartoonData.classesYing.slice(0,2);
			this.rotationArr = [...this.conGuo.slice(0,2),...this.conYing.slice(0,1)];			
		}
	}
</script>

<style scoped>
	/* flex */
	.top,.classify{
		display: flex;
		align-items: center;
		justify-content: space-around;
	}
	.top{
		margin: 10px;
	}
	/* .inp{
		padding: 6rpx 20rpx;
		border: 1rpx solid lightgrey;
		width: 240rpx;
		border-radius: 18rpx;
	} */
	.classify{
		width: 280rpx;
		height: 60rpx;
		background-color: #d3d3d3;
		border-radius: 10px;
	}
	/* 搜索 */
	.frame{
		display: flex;
		align-items: center;
	}
	input {
		border: 1px solid gray;
		border-radius: 15px;
		width: 140px;
		height: 20px;
		line-height: 20px;
		padding: 0 20rpx;
	}
	
	.searchP {
		height: 30px;
		width: 30px;
	}
	/* 小字 */
	.spanCla{
		font-size: 12px;
		transform: scale(0.9);
	}
	/* 轮播 */
	.swiper {
		height: 300rpx;
	}
	.swiper-item {
		display: block;
		height: 300rpx;
		line-height: 300rpx;
		text-align: center;
	}
	/* 内容部分 */
	.w{
		width: 95%;
		margin: 20rpx auto;
	}
	.mbtm{
		margin-bottom: 5px;
	}
	.box{
	  display: flex;
	  justify-content: space-between;
	  flex-wrap: wrap;
	}
	.boxbox{
		width: 49%;
	}
	.imgbox{
		width: 100%;
		height: 100px;
	}
	text{
		font-size: 13px;
	}
	.text{
		font-size: 13px;
		color: #B2AFAF;
		margin-bottom: 5px;
	}
	.text3{
		position: absolute;
		right: 10px;
		bottom: 10px;
		color: #fff;
		font-size: 12px;
		background-color: #696969 ;
		/* transform: scale(0.9); 小字*/
	}
	.pos11{
		position: relative;
	}
</style>

